import React,{Component} from 'react'
// import {incrementCreator,decrementCreator } from '../reudx/actions'
export default class AppUI extends Component{
    
    increment=()=>{
        // 1获取到选择框里面的值
        // 2获取到初始状态
        // 3进行计算并更新
        let selectVal=this.refs.selectVal.value*1
        
        // let count=this.props.store.getState()
        this.props.store.dispatch({type:'increment',data:selectVal})
        
        
        console.log(this.props.store.getState())
    }
    decrement=()=>{
        // 1获取到选择框里面的值
        // 2获取到初始状态
        // 3进行计算并更新
        let selectVal=this.refs.selectVal.value*1
        // console.log(selectVal);
        // console.log(typeof selectVal)
        this.props.store.dispatch({type:'decrement',data:selectVal})
        // this.setState({
        //     count:count-selectVal
        // })
    }
    // 偶数加
    oddIncrement=()=>{
        // 1获取到选择框里面的值
        // 2获取到初始状态
        // 3进行计算并更新
        let selectVal=this.refs.selectVal.value*1
        let count =this.props.store.getState()
        if(count%2===0){
            this.props.store.dispatch({type:'increment',data:selectVal})
        }
        
    }
    asyncIncrement=()=>{
        // 1获取到选择框里面的值
        // 2获取到初始状态
        // 3进行计算并更新
        let selectVal=this.refs.selectVal.value*1
      
        setTimeout(()=>{
            this.props.store.dispatch({type:'increment',data:selectVal})
        },1000)
        
    }
    render(){
        
        let count=this.props.store.getState()
        return(
            <div>
                <p>click {count} times</p>
                <div>
                    <select ref='selectVal'>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>&nbsp;
                    <button onClick={this.decrement}>-</button>&nbsp;
                    <button onClick={this.oddIncrement}>偶数加</button>&nbsp;
                    <button onClick={this.asyncIncrement}>异步触发</button>
                </div>
            </div>
        )
    }
}
